import { defineStore } from 'pinia';
import { reactive, ref } from 'vue';
import type { RouteRecordName, _RouteRecordBase } from 'vue-router';
interface Props {
  visitedView: _RouteRecordBase[];
  fixedVisitedView: _RouteRecordBase[];
  cacheVisitedView: string[];
}
export const tagsStore = defineStore('tags', () => {
  const breadcrumbData = ref<{ path: string; name: string; icon: string }[]>([]);
  const visitedConfig = reactive<Props>({
    visitedView: [],
    fixedVisitedView: [],
    cacheVisitedView: [],
  });

  // 面包屑配置
  const setBreadcrumb = (routes: _RouteRecordBase[]) => {
    breadcrumbData.value = routes?.map((item) => {
      return { path: item.path, name: item.meta?.name as string, icon: item.meta?.icon as string };
    });
  };

  function handleAddFixedVisitedView(view: _RouteRecordBase) {
    addFixedVisitedView(view);
    addVisitedView(view);
  }

  function addFixedVisitedView(view: _RouteRecordBase) {
    if (
      visitedConfig.fixedVisitedView.find((item) => {
        return item.name === view.name;
      })
    ) {
      visitedConfig.fixedVisitedView.push(view);
    }
  }

  // 记录访问过的路由导航
  function addVisitedView(routes: _RouteRecordBase) {
    console.log('////', routes);
    if (
      routes.meta?.name &&
      !visitedConfig.visitedView.find((item) => {
        return item.name == routes.name;
      })
    ) {
      visitedConfig.visitedView.push(routes);
    }
  }
  // 删除tags
  function deleteVisitedView(name: RouteRecordName | undefined) {
    if (!name) return;
    const index = visitedConfig.visitedView.findIndex((item) => {
      return item.name == name;
    });
    deleteCacheView(name);

    if (index > -1) {
      visitedConfig.visitedView.splice(index, 1);
    }
  }

  // 删除其他tags
  function deleteOtherVisitedView(name: RouteRecordName | undefined) {
    const handleVisitedArr = visitedConfig.visitedView.filter((item) => {
      return item.meta?.fixed || item.name === name;
    }) as _RouteRecordBase[];
    visitedConfig.visitedView.length = 0;
    visitedConfig.cacheVisitedView.length = 0;
    visitedConfig.visitedView.push(...handleVisitedArr);
    visitedConfig.cacheVisitedView.push(name!.toString());
  }
  // 删除所有
  function delAllVisitedView() {
    const fixedView = visitedConfig.visitedView.filter((item) => {
      return item.meta?.fixed;
    });
    visitedConfig.visitedView.length = 0;
    visitedConfig.cacheVisitedView.length = 0;
    visitedConfig.visitedView.push(...fixedView);
  }

  // 缓存路由
  function addCacheView(name: string) {
    if (!visitedConfig.cacheVisitedView.includes(name)) {
      visitedConfig.cacheVisitedView.push(name);
      console.log(visitedConfig.cacheVisitedView);
    }
  }

  function deleteCacheView(name: RouteRecordName | undefined) {
    if (!name) return;
    const index = visitedConfig.cacheVisitedView.indexOf(name.toString());
    if (index > -1) {
      visitedConfig.cacheVisitedView.splice(index, 1);
      console.log(visitedConfig.cacheVisitedView);
    }
  }

  return {
    setBreadcrumb,
    breadcrumbData,
    addVisitedView,
    deleteOtherVisitedView,
    visitedConfig,
    addCacheView,
    deleteVisitedView,
    delAllVisitedView,
    handleAddFixedVisitedView,
    deleteCacheView,
  };
});
